<!doctype html>
<html lang="zh" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Language" content="en" />
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#4188c9">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  <!-- Generated: 2018-04-06 16:27:42 +0200 -->
  <title>教师首页</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Dashboard Core -->
  <link href="./assets/css/dashboard.css" rel="stylesheet" />
  <script src="./assets/js/dashboard.js"></script>
  <!-- c3.js Charts Plugin -->
  <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
  <script src="./assets/plugins/charts-c3/plugin.js"></script>
  <!-- Google Maps Plugin -->
  <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
  <script src="./assets/plugins/maps-google/plugin.js"></script>
  <!-- Input Mask Plugin -->
  <script src="./assets/plugins/input-mask/plugin.js"></script>
</head>

<body class="">
  <div class="page">
    <div class="page-main">

      <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
        <div class="container">
          <div class="row align-items-center">
            <div class="col-lg-1 ml-auto">
              <a href="login" class="btn btn-blue">退出</a>
            </div>
            <div class="col-lg order-lg-first">
              <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                <li class="nav-item">
                  <a href="./index" class="nav-link active"><i class="fe fe-home"></i>首页</a>
                </li>

                <li class="nav-item">
                  <a href="./newslist" class="nav-link"><i class="fe fe-box"></i>
                    教师资讯</a>
                </li>
                <li class="nav-item dropdown">
                  <a href="./courseList" class="nav-link"><i class="fe fe-calendar"></i>
                    现有课程</a>

                </li>
                <li class="nav-item dropdown">
                  <a href="./addCourse" class="nav-link"><i class="fe fe-check-square"></i>新增课程</a>
                </li>
                <li class="nav-item dropdown">
                  <a href="./upCourse" class="nav-link"><i
                          class="fe fe-check-square"></i>修改课程</a>
                </li>
                <li class="nav-item">
                  <a href="./user" class="nav-link"><i class="fe fe-image"></i>个人信息</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="my-3 my-md-5" id="app">
        <div class="container">
          <div class="page-header">
            <h1 class="page-title">
              数据视化
            </h1>
          </div>
          <div class="row row-cards">
            <div class="col-sm-6 col-lg-3">
              <div class="card p-3">
                <div class="d-flex align-items-center">
                  <span class="stamp stamp-md bg-blue mr-3">
                    <i class="fe fe-dollar-sign"></i>
                  </span>
                  <div>
                    <h4 class="m-0"><a v-text="chart.courseTotal"></a></h4>
                    <small class="text-muted">您的课程数</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-3">
              <div class="card p-3">
                <div class="d-flex align-items-center">
                  <span class="stamp stamp-md bg-green mr-3">
                    <i class="fe fe-shopping-cart"></i>
                  </span>
                  <div>
                    <h4 class="m-0"><a v-text="chart.studentTotal"></a></h4>
                    <small class="text-muted">选课学生总数</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-3">
              <div class="card p-3">
                <div class="d-flex align-items-center">
                  <span class="stamp stamp-md bg-red mr-3">
                    <i class="fe fe-users"></i>
                  </span>
                  <div>
                    <h4 class="m-0"><a v-text="chart.timeTotal"></a>M</h4>
                    <small class="text-muted">学生总学习时间</small>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-lg-3">
              <div class="card p-3">
                <div class="d-flex align-items-center">
                  <span class="stamp stamp-md bg-yellow mr-3">
                    <i class="fe fe-message-square"></i>
                  </span>
                  <div>
                    <h4 class="m-0"><a v-text="chart.assessTotal"></a></h4>
                    <small class="text-muted">学生评论数</small>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row row-cards row-deck">
            <div class="col-12">
              <div class="card">
                <div class="table-responsive">
                  <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
                    <thead>
                      <tr>
                        <th>学生</th>
                        <th>课名</th>
                        <th>进度</th>
                        <!-- <th class="text-center">Satisfaction</th> -->
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in table" :key="index">
                        <td>
                          <div v-text="item.studentName"></div>
                        </td>
                        <td>
                          <div  v-text="item.courseName"></div>
                        </td>
                        <td>
                          <div v-text="item.time+'分钟'"></div>
                        </td>
                        <!-- <td class="text-center">
                          <div class="mx-auto chart-circle chart-circle-xs" data-value="0.42" data-thickness="3"
                            data-color="blue">
                            <div class="chart-circle-value">42%</div>
                          </div>
                        </td> -->
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>



          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="container">
        <div class="row align-items-center flex-row-reverse">
          <div class="col-auto ml-lg-auto">
            <div class="row align-items-center">
              <div class="col-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="#">教师系统</a></li>
                  <li class="list-inline-item"><a href="#">@2019</a></li>
                </ul>
              </div>
            </div>
          </div>

        </div>
      </div>
    </footer>
  </div>
</body>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        chart:null,
        table:null
      }
    },
    created() {
      axios.get("/onlineTeacher/api/indexData").then(response=>(this.chart=response["data"]["data"]["chart"],this.table=response["data"]["data"]["table"]))
    },




  })


</script>

</html>